<!--
 @Description 新闻列表组件
 @author hemengxia
 @date 2022/11/11
-->

<template>
  <section
    class="news-list-style-one-comp"
    :style="{
      'padding-top':px2rem(option.top),
      'margin-bottom': px2rem(option.bottom),
      'padding-left': px2rem(option.spacing),'padding-right':px2rem(option.spacing)
    }"
  >
    <cell-title
      v-if="isShowModuleName"
      :title="moduleName"
      :hide-desc="true"
      :option="option"
      :style="{
        'background-color': option.backgroundColor,
        'border-radius':
          px2rem(option.radiusSize) + ' ' + px2rem(option.radiusSize) + ' 0 0',
        'padding': `0 ${px2rem(option.spacing)}`
      }"
    />
    <van-pull-refresh
      id="newsmain"
      v-model="isLoading"
      @refresh="onRefresh"
    >
      <van-list
        v-model="loading"
        :immediate-check="false"
        :error.sync="error"
        :finished="finished"
        :finished-text="finishedText"
        loading-text="正在加载中..."
        error-text="请求失败，点击重新加载"
        @load="onLoad"
      >
        <ul>
          <li
            v-for="(item, index) in list"
            :key="index"
            :style="{
              width:
                'calc((' +
                px2rem(750) +
                ' - ' +
                px2rem(option.spacing * 2) +
                '))'
            }"
            @click="goNewsDetail(item)"
          >
            <template v-if="resource ==='xw'">
              <newsListStyleEight v-if="item.showType=='ZSXS_CWZ'" :item="item" :option="option" />
              <newsListStyleTwo v-else-if="item.showType=='ZSXS_YWYSYS'" :item="item" :option="option" />
              <newsListStyleThree v-else-if="item.showType=='ZSXS_YWZTYS'" :item="item" :option="option" />
              <newsListStyleFour v-else-if="item.showType=='ZSXS_YWZSYS'" :item="item" :option="option" />
              <newsListStyleFive v-else-if="item.showType=='ZSXS_TWHPDTYS'" :item="item" :option="option" />
              <newsListStyleSix v-else-if="item.showType=='ZSXS_TWHPBTYS'" :item="item" :option="option" />
              <newsListStyleSeven
                v-else-if="item.showType=='ZSXS_TWHPDSYS'"
                :item="item"
                :position="index"
                :option="option"
              />
              <newsListStyleOne v-else :item="item" :option="option" />
            </template>
            <template v-else-if="resource ==='zl'">
              <newsListStyleEight :item="item" :option="option" />
            </template>
          </li>
        </ul>
      </van-list>
    </van-pull-refresh>
  </section>
</template>
<script>
import mixins from './../mixins'
import newsListStyleOne from './newsListStyleOne'
import newsListStyleTwo from './newsListStyleTwo'
import newsListStyleThree from './newsListStyleThree'
import newsListStyleFour from './newsListStyleFour'
import newsListStyleFive from './newsListStyleFive'
import newsListStyleSix from './newsListStyleSix'
import newsListStyleSeven from './newsListStyleSeven'
import newsListStyleEight from './newsListStyleEight'
import CellTitle from '@/components/CustomPage/apps/widget/characters/cellTitle'

const defImg = ''
export default {
  name: 'NewsListStyleOneComp',
  components: {
    newsListStyleOne,
    newsListStyleTwo,
    newsListStyleThree,
    newsListStyleFour,
    newsListStyleFive,
    newsListStyleSix,
    newsListStyleSeven,
    newsListStyleEight,
    CellTitle
  },
  inject: ['footerHeight'],
  mixins: [mixins],
  props: {
    option: {
      type: Object,
      default() {
        return {}
      }
    },
    isInitData: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      view: '/API-DOCUMENT/document/file/download?id=',
      total: 0,
      isNoData: false,
      isLoadError: false,
      error: false,
      loading: false, // 是否处于加载状态
      finished: false, // 是否已加载完所有数据
      isLoading: false, // 是否处于下拉刷新状态
      finishedText: '已经到底了',
      list: [],
      /** 接口参数 start */
      newsType: '',
      page: 1,
      bt: 'xw',
      /** 接口参数 end */
      scrollTop: 0,
      souMold: '', // 专区资源类型
      classLabel: ''// 专区分类标签
    }
  },
  computed: {
    isShowModuleName() {
      return this.option.isShowModuleName
    },
    // 模块名称
    moduleName() {
      return this.option.moduleName
    },
    resource() {
      return this.option.resource
    }
  },
  async created() {
    this.souMold = this.option.souMold
    this.classLabel = this.option.classLabel
    if (this.isInitData && this.option.isInit) {
      await this.initData()
    } else {
      this.list = [
        {
          id: 'da9f5c22-67f3-46b6-b7c7-3d69ea754256',
          mainTitle: '新闻标题1',
          publishTime: '2022-10-10 12:00:00',
          coverImgIdUrl: defImg,
          // smallCoverImgId:"1,2,3,4,5,6,7,8,9,10",
          smallCoverImgId: '1,2',
          bigCoverImgId: '1,2,3,4,5',
          videoBigCoverImgId: '1',
          showType: 8,
          subjectName: '资料1',
          fileType: 'WJLX_WORD'
        },
        {
          id: 'da9f5c22-67f3-46b6-b7c7-3d69ea754257',
          mainTitle: '新闻标题2',
          publishTime: '2022-10-10 12:00:00',
          coverImgIdUrl: defImg,
          showType: 2,
          subjectName: '资料2',
          fileType: 'WJLX_WORD'
        },
        {
          id: 'da9f5c22-67f3-46b6-b7c7-3d69ea754258',
          mainTitle: '新闻标题3',
          publishTime: '2022-10-10 12:00:00',
          coverImgIdUrl: defImg,
          showType: 3,
          subjectName: '资料3',
          fileType: 'WJLX_WORD'
        }

      ]
      this.finished = true
    }
  },

  methods: {
    /**
     * 用于initData方法调用完设置数据
     */
    setData(result) {
      if (result !== 'error') {
        this.finished = false
        const { rows, total } = result?.dataList.data || {}
        if (rows) {
          this.list.push(...rows)
        }
        this.loading = false
        this.isLoading = false
        this.isNoData = total < 1
        if (this.isNoData) {
          this.finishedText = ''
        } else {
          this.finishedText = '已经到底了'
        }
        if (this.list.length >= total) {
          this.finished = true
        } else {
          this.finished = false
        }
      }
    },
    goNewsDetail(item) {
      // const { classifyName } = this.tabs.find(item => {
      //   return item.id === this.active
      // })
      // this.$router.push({ path: '/newsDetail', name: 'NewsDetail', query: { bt: 'xw', i: item.id, t: classifyName }})
    },
    refresh4other() {
      return new Promise((resolve) => {
        this.finished = true
        this.page = 1
        this.list = []
        resolve()
      })
    },
    onRefresh() {
      this.finished = false
      this.page = 1
      this.list = []
      this.getDataByCode('dataList')
    },

    onLoad() {
      if (!this.isLoading) {
        this.page += 1
        this.getDataByCode('dataList')
      } else {
        this.loading = false
      }
    }
  }
}
</script>
<style lang="scss">
@import '@/styles/utility/rem.scss';

.news-list-style-one-comp {
  //background-color: #f7f8f9;
  //padding: rem(10) 0;
  margin: 0 auto;
  position: relative;
  width: rem(750);

  .van-pull-refresh {
    padding: 0;

    ul {

      li {
        position: relative;
        background-color: #fff;

        &:after {
          left: rem(20);
          right: rem(20);
          width: auto;
          height: 1px;
          position: absolute;
          z-index: 0;
          bottom: 0;
          content: '';
          background-image: -webkit-linear-gradient(
                  bottom,
                  #ececec 50%,
                  transparent 0
          );
          background-image: linear-gradient(0deg, #ececec 50%, transparent 0);
        }

        &:last-child::after {
          height: 0;
        }
      }
    }
  }
}
</style>
